<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米</title>
		<style type="text/css">
			.a{
				width: 100%px;
				height: 50px;
				border: 1px solid  red;
				background-color: black;
				
			}
			.a1{
				width: 500px;
				height: 20px;
				border: 1px solid red;
				background-color: aqua;
				margin: auto;
				float: left;
				
				
			}
			.a2
			{ width: 300px;
			height: 20px;
				background-color: aqua;
				margin-bottom: 20px;
				float: right;
			}
			.a3{
				width: 900px;
				height: 45px;
				margin: auto;
				margin-top: 
				20px;
			}
			.b{
				width: 900px;
				height: 60px;
				border: 1px solid black;
				background-color: aliceblue;
				
				margin:15px  auto 15px;
				
				
			}
			
			.b1{
				width: 60px;
				height: 60px;
				border: 1px solid red;
				float: left;
				background-color: aquamarine;
			}
			.b2
			{
				width: 300px;
				height: 50px;
				margin:5px auto -4px;
				border: 1px solid red;
				background-color: aqua;
		
		

				
			}
			.b3{
				width: 250px;
				height: 50px;
				float: right;
				border: 1px solid red;
				margin-top: -48px;
				background-color: pink;
			}
			.c{
				width: 900px;
				height: 500px;
				border: 1px solid red;
				margin:10px  auto  10px;
			}
			.c1{
				width: 300px;
				height: 500px;
				border: 1px solid black;
				float: left;
				background-color: aquamarine;
			
			}
			.c2{
				width: 598px;
				height: 500px;
				border: 1px solid black;
				float: right;
				margin-top: -502px;
				background-color:pink;
			}
			.d{
				width: 900px;
				height: 100px;
				border: 1px solid orangered;
				margin: auto;
				
			}
			.d1{
				width: 150px;
				height: 100px;
				border: 1px solid grey;
				float: left;
				background-color: paleturquoise;
			}.d2{
				width: 200px;
				height: 100px;
				border: 1px solid gainsboro;
				margin-left: 175px;
				background-color: gold;
				
			}.d3{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				background-color: aqua;
				margin: -102px;
				margin-left: 434px;
			}.d4{
				width: 205px;
				height: 100px;
				border: 1px solid red ;
				background-color: plum;
				float: right;
				
				
			}
			.z{
				width: 900px;
				height: 85px;
				border: 1px solid black;
				margin:20px  auto 20px;
			
			}.z1{
				width: 500px;
				height: 85px;
				border: 1px solid red;
				
				margin: auto;
				
			}.z11{
				width: 250px;
				height: 85px;
				background-color: aqua;
				float: left;
			}.z12{
				width: 150px;
				height: 85px;
				background-color: palegreen;
				float: right;
			}
				
			
			
			
			

			
		</style>
	</head>
	<body>
		<div class="a" ><div class="a3">
			
		
		<div class="a1">a1</div>
		<div class="a2">a2</div>
		</div>
		</div>
		
		<div class="b">
			<div class="b1">b1</div>
			<div class="b2">b2</div>
			<div class="b3">b3</div>
		</div>
		<div class="c">
			<div class="c1">c1</div>
			<div class="c2">c2</div>
		</div>
		<div class="d">
			<div class="d1">d1</div>
			<div class="d2">d2</div>
			<div class="d3">d3</div>
			<div class="d4">d4</div>
		</div>
		<div class="z"> 
		<div class="z1">
			<div class="z11">z1</div>
			<div class="z12">z2</div>
		</div>
		</div>
	
	
	
		
	</body>
</html>
